/*
 * @Author: xiaosihan 
 * @Date: 2024-06-20 16:43:53 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 21:02:15
 */


import hashHistory from "@hashHistory";
import userStore from "@views/userStore";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import styles from "./FactoryHeader.module.less";
import factoryStore from "../factoryStore";
import { Button, Dropdown } from "antd";

interface Iprops {
    children?: ReactNode
}

// 工厂端的公共头
export default function FactoryHeader() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [isLogin, setIsLogin] = useState(factoryStore.isLogin);
    const [loginStatus, setLoginStatus] = useState(factoryStore.loginStatus);
    const loca = useLocation();

    useEffect(() => {
    }, [loca]);

    useEffect(() => autorun(() => {
        setIsLogin(factoryStore.isLogin);
        setLoginStatus(factoryStore.loginStatus);
    }, { delay: 10 }), []);

    return (
        <div className={styles.FactoryHeaderBG} >
            <div className={styles.FactoryHeader} >

                <span
                    className={styles.backHome}
                    onClick={() => {
                    }}
                >
                    <img src="./logo2.png" className={styles.logo} alt="" />
                </span>
                {
                    isLogin === false && <>
                        <Dropdown
                            placement="bottom"
                            mouseEnterDelay={0}
                            menu={{
                                items: [
                                    {
                                        key: '1',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div className={clsx(styles.font16, styles.fontBold)} >模型图纸协作</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '2',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div className={clsx(styles.font16, styles.fontBold)} >物理仿真分析</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '3',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div className={clsx(styles.font16, styles.fontBold)} >可制造性分析</div>
                                            </div>
                                        ),
                                    },
                                ]
                            }}>
                            <span className={styles.btn}  >功能</span>
                        </Dropdown>
                        <Dropdown
                            placement="bottom"
                            mouseEnterDelay={0}
                            menu={{
                                items: [
                                    {
                                        key: '1',
                                        label: (
                                            <div className={styles.dropdownItem}>
                                                <div className={clsx(styles.font16, styles.fontBold)} >工业机械零部件按需制造</div>
                                                <div className={styles.font12} >全世界的制造商资源参与报价，覆盖机加工、铸造钣金、冲压、塑胶成型等服务。</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '2',
                                        label: (
                                            <div className={styles.dropdownItem}>
                                                <div className={clsx(styles.font16, styles.fontBold)} >赏金询盘</div>
                                                <div className={styles.font12} >悬赏接单，包括非标零部件加工、模组制造、OEM、原型验证、工程方案验证等主要类型。</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '3',
                                        label: (
                                            <div className={styles.dropdownItem}>
                                                <div className={clsx(styles.font16, styles.fontBold)} >标准件数据库</div>
                                                <div className={styles.font12} >面对各行业的不同产品提供原厂标准数据模型/工程图图纸</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '4',
                                        label: (
                                            <div className={styles.dropdownItem}>
                                                <div className={clsx(styles.font16, styles.fontBold)} >3D打印</div>
                                                <div className={styles.font12} >FDM, SLS, SLA, MJF, Polyjet, DMLS, DLP</div>
                                            </div>
                                        ),
                                    },
                                ]
                            }}>
                            <span className={styles.btn} >服务</span>
                        </Dropdown>
                        <Dropdown
                            placement="bottom"
                            mouseEnterDelay={0}
                            menu={{
                                items: [
                                    {
                                        key: '1',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >航空航天</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '2',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >交通工具</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '3',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >农业器械</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '4',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >高端制造</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '5',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >研发机构</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '6',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >机器人</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '7',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >3c产品</div>
                                            </div>
                                        ),
                                    },
                                    {
                                        key: '8',
                                        label: (
                                            <div className={styles.dropdownItem} >
                                                <div
                                                    className={clsx(styles.font16, styles.fontBold)}
                                                    style={{ textAlign: "center" }}
                                                >教育</div>
                                            </div>
                                        ),
                                    },
                                ]
                            }}>
                            <span className={styles.btn} >解决方案</span>
                        </Dropdown>
                    </>
                }

                <div className={styles.right} >
                    {
                        isLogin &&
                        <>
                            <span
                                className={clsx(loca.pathname === "/factory/factoryQuotation" && styles.active, styles.btn2)}
                                onClick={() => {
                                    hashHistory.push("/factory/factoryQuotation");
                                }}
                            >报价请求</span>
                            <span
                                className={clsx(["/factory/factoryOrder", "/factory"].includes(loca.pathname) && styles.active, styles.btn2)}
                                onClick={() => {
                                    hashHistory.push("/factory/factoryOrder");
                                }}
                            >订单</span>
                        </>
                    }

                    {
                        !isLogin && ["login", "register"].includes(loginStatus) &&
                        <Button
                            type="primary"
                            onClick={() => {
                                switch (loginStatus) {
                                    case "login":
                                        factoryStore.setLoginStatus("register");
                                        break;
                                    case "register":
                                        factoryStore.setLoginStatus("login");
                                        break;
                                    default:
                                        break;
                                }
                            }}
                        >
                            {loginStatus === "login" && "申请成为供应商"}
                            {loginStatus === "register" && "供应商登录"}
                        </Button>
                    }

                    {
                        isLogin &&
                        <>
                            <span className={styles.message}>消息</span>
                            <Dropdown
                                placement="bottom"
                                mouseEnterDelay={0}
                                menu={{
                                    items: [
                                        {
                                            key: '1',
                                            label: (
                                                <div
                                                    onClick={() => {
                                                        hashHistory.push("/factory/center");
                                                    }}
                                                    className={clsx(styles.dropdownItem, styles.center, styles.linght50)}
                                                >
                                                    <div
                                                        className={clsx(styles.font14, styles.fontBold)}
                                                    >厂商中心</div>
                                                </div>
                                            ),
                                        },
                                        {
                                            key: '2',
                                            label: (
                                                <div
                                                    onClick={() => {
                                                        hashHistory.push("/factory/setting");
                                                    }}
                                                    className={clsx(styles.dropdownItem, styles.center, styles.linght50)}
                                                >
                                                    <div
                                                        className={clsx(styles.font14, styles.fontBold)}
                                                    >账号设置</div>
                                                </div>
                                            ),
                                        },
                                        {
                                            key: '3',
                                            label: (
                                                <div
                                                    onClick={() => {
                                                        factoryStore.loginOut();
                                                    }}
                                                    className={clsx(styles.dropdownItem, styles.center, styles.none_border, styles.linght50)}
                                                >
                                                    <div
                                                        className={clsx(styles.font14, styles.fontBold)}
                                                    >退出登录</div>
                                                </div>
                                            ),
                                        },
                                    ]
                                }}>
                                <Button type="primary">厂商名</Button>
                            </Dropdown>
                        </>
                    }

                </div>

            </div>
        </div>
    );

}